<div class="subheader editor-toolbar" id="editor-header">
  <div class="fixed-container">
    <div class="btn-group">
      <div class="btn-toolbar pull-left" ng-cloak ng-controller="AppDefinitionToolbarController">
        <button class="btn btn-inverse"
                id="{{item.id}}"
                ng-class="{'separator': item.type == 'separator'}"
                ng-click="toolbarButtonClicked($index)" ng-disabled="item.type == 'separator' || item.enabled == false"
                ng-repeat="item in items" ng-switch
                on="item.type"
                title="{{item.title | translate}}">
          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>
          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
    <div class="btn-group pull-right" ng-show="!secondaryItems.length">
      <div class="btn-toolbar pull-right" ng-controller="AppDefinitionToolbarController">
        <button class="btn btn-inverse" id="{{item.id}}" ng-class="{'separator': item.type == 'separator'}"
                ng-click="toolbarSecondaryButtonClicked($index)"
                ng-disabled="item.type == 'separator'" ng-repeat="item in secondaryItems"
                ng-switch on="item.type"
                title="{{item.title | translate}}">
          <i class="toolbar-button" data-toggle="tooltip" ng-class="item.cssClass" ng-switch-when="button"
             title="{{item.title | translate}}"></i>
          <div ng-class="item.cssClass" ng-switch-when="separator"></div>
        </button>
      </div>
    </div>
  </div>
</div>
<div auto-height class="container-fluid content" ng-if="currentAppDefinition" offset="40">
  <h2>{{'APP.DETAILS.TITLE' | translate:currentAppDefinition}}</h2>
  <div class="content-canvas-wrapper">
    <div class="content-canvas">
      <div class="row">
        <div class="col-xs-4">
          <div class="preview-wrapper active">
            <h3>{{'APP.TITLE.PREVIEW' | translate}}</h3>
            <div class="app preview {{currentAppDefinition.definition.theme}}">
              <div class="app-content">
                <h3>{{currentAppDefinition.name}}</h3>
                <p>{{currentAppDefinition.description}}</p>
              </div>
              <div class="backdrop">
                <i class="icon icon-choice" ng-show="!currentAppDefinition.definition.icon"></i>
                <i class="glyphicon {{currentAppDefinition.definition.icon}}"
                   ng-show="currentAppDefinition.definition.icon"></i>
              </div>
              <div class="logo">
                <i class="icon icon-choice" ng-show="!currentAppDefinition.definition.icon"></i>
                <i class="glyphicon {{currentAppDefinition.definition.icon}}"
                   ng-show="currentAppDefinition.definition.icon"></i>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xs-8">
          <div class="form-group">
            <label>{{'APP.ICON' | translate}}</label>
            <div class="selection" id="toggle-icon-select" ng-click="changeIcon($event)">
              <i class="glyphicon {{currentAppDefinition.definition.icon}}"></i> {{'APP.ACTION.SELECT-ICON' |
              translate}} <i class="icon icon-caret-down"></i>
            </div>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label>{{'APP.THEME' | translate}}</label>
            <div class="selection" id="toggle-theme-select" ng-click="changeTheme($event)">
              <span class="app app-swatch {{currentAppDefinition.definition.theme}}"></span> {{'APP.ACTION.SELECT-THEME'
              | translate}} <i class="icon icon-caret-down"></i>
            </div>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label for="groupAccessApp">{{'APP.GROUPS-ACCESS' | translate}}</label>
            <input class="form-control" custom-keys enter-pressed="changeGroups($event)"
                   id="groupAccessApp" ng-disabled="model.loading"
                   ng-model="currentAppDefinition.definition.groupsAccess" type="text"/>
          </div>
        </div>
        <div class="col-xs-8">
          <div class="form-group">
            <label for="userAccessApp">{{'APP.USERS-ACCESS' | translate}}</label>
            <input class="form-control" custom-keys enter-pressed="changeUsers($event)"
                   id="userAccessApp" ng-disabled="model.loading"
                   ng-model="currentAppDefinition.definition.usersAccess" type="text"/>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col-xs-12">
          <h3>{{'APP.DETAILS.MODELS-TITLE' | translate}}

          </h3>
          <div class="btn-group">
            <button class="btn btn-default" class="stencil-info-edit-properties" id="toggle-included-models"
                    ng-click="editIncludedModels($event)">
              {{'APP.ACTION.EDIT-MODELS' | translate}}
            </button>
          </div>
          <div class="no-results"
               ng-show="!currentAppDefinition.definition.models.length && !currentAppDefinition.definition.cmmnModels.length">
            {{'APP.DETAILS.NO-MODELS-SELECTED' | translate}}
          </div>
        </div>
      </div>

      <br/>

      <div class="row">
        <div class="tabs-wrapper">

          <div active-tab="appBuilder.activeTab" tab-control="tabs">
          </div>

          <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'bpmn'">
            <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.models">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{model.version}}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{model.name}}">
                    {{model.name}}
                  </h3>
                  <p>{{model.description}}</p>
                </div>
              </div>
            </div>
          </div>

          <div class="col-xs-12 item-wrapper" ng-show="appBuilder.activeTab == 'cmmn'">
            <div class="item fadein" ng-repeat="model in currentAppDefinition.definition.cmmnModels">
              <div class="item-box" ng-style="{'background-image': 'url(\'' + getModelThumbnailUrl(model.id) + '\')'}">
                <div class="actions">
                  <span class="badge">v{{model.version}}</span>
                </div>
                <div class="details">
                  <h3 class="truncate" title="{{model.name}}">
                    {{model.name}}
                  </h3>
                  <p>{{model.description}}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
